<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件生命周期</title>
</head>

<body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 转换jsx的库 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入PropType库  min没有警告-->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">/* 此处要写babel */
        // 创建组件
        class Demo extends React.Component {
            // constructor
            constructor(props) {
                super(props)
                console.log('constructor')
                this.state = { newArr: [] }

            }

            getSnapshotBeforeUpdate(prevProps, prevState) {
                console.log('getSnapshotBeforeUpdate-prevProps', prevProps)
                console.log('getSnapshotBeforeUpdate-prevState', prevState)
                return 'abc';
            }
            componentDidUpdate(prevProps, prevState, snapshot) {
                console.log('componentDidUpdate-prevProps', prevProps)
                console.log('componentDidUpdate-prevState', prevState)
                console.log('componentDidUpdate-snapshot', snapshot)

                setInterval(() => {
                    // 获取原数据
                    const { newArr } = this.state;
                    // 模拟一条新闻
                    const news = "新闻" + (newArr.length + 1)
                    // 更新状态
                    this.setState({
                        newArr: [...newArr, news]
                    })
                }, 1000)
            }

            // 渲染组件
            render() {
                console.log('render')
                return (
                    <>
                        <br />
                        <div className="list">
                            <div className="news">新闻6</div>
                            <div className="news">新闻5</div>
                            <div className="news">新闻4</div>
                            <div className="news">新闻3</div>
                            <div className="news">新闻2</div>
                            <div className="news">新闻1</div>
                        </div>
                    </>
                )
            }
        }

        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(<Demo />);
    </script>

    <style>
        .list {
            width: 300px;
            height: 150px;
            overflow: auto;
            background-color: aqua;
        }

        .news {
            width: 280px;
            height: 30px;
            text-align: center;
        }
    </style>
</body>

</html>